body {
  background: #ddd;
}

div {
  width: 100px;
  height: 100px;
  margin: 30vmin auto 0;
  background: #ddd;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  user-select: none;
  border-radius: 10px;

  box-shadow: 
    7px 7px 12px rgba(0, 0, 0, .4),
    -7px -7px 12px rgba(255, 255, 255, .9),
    inset 0 0 0 rgba(255, 255, 255, .9),
    inset 0 0 0 rgba(0, 0, 0, .4);

  transition: .2s all;

  &:active {
    box-shadow: 
      0 0 0 rgba(0, 0, 0, .4),
      0 0 0 rgba(255, 255, 255, .9),
      inset -7px -7px 12px rgba(255, 255, 255, .9),
      inset 7px 7px 12px rgba(0, 0, 0, .4);
  }
}